‹

Exemplos Interativos do CSS Flexbox

flex-direction

flex-direction: row

Define a direção dos itens no container flex. O valor padrão é row (horizontal da esquerda para direita).

CSS

.flex-container {
  display: flex;
  flex-direction: row;
}
1
2
3
4
5

flex-wrap

80px

flex-wrap: nowrap

Define se os itens devem quebrar linha quando não há espaço suficiente. O valor padrão é nowrap.

CSS

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15

justify-content

justify-content: flex-start

Alinha os itens ao longo do eixo principal (horizontal por padrão). Controla a distribuição do espaço entre os itens.

CSS

.flex-container {
  display: flex;
  justify-content: flex-start;
}
1
2
3

align-items

align-items: stretch

Alinha os itens ao longo do eixo transversal (vertical por padrão). O valor padrão é stretch.

CSS

.flex-container {
  display: flex;
  align-items: stretch;
}
Item 1
Item 2
Item 3

align-content

align-content: stretch

Alinha as linhas do flex container quando há múltiplas linhas. Só funciona com flex-wrap: wrap.

CSS

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

flex-grow

flex-grow: 0

Define quanto um item deve crescer em relação aos outros itens. O valor padrão é 0 (não cresce).

CSS

.flex-item {
  flex-grow: 0;
}
Item 1
Item 2
Item 3

flex-shrink

flex-shrink: 1

Define quanto um item deve encolher quando não há espaço suficiente. O valor padrão é 1.

CSS

.flex-item {
  flex-shrink: 1;
}
Item muito longo 1
Item muito longo 2
Item muito longo 3

order

order: 0 (padrão)

Define a ordem de exibição dos itens. Itens com valores menores aparecem primeiro. O valor padrão é 0.

CSS

.flex-item:nth-child(1) { order: 0; }
.flex-item:nth-child(2) { order: 0; }
.flex-item:nth-child(3) { order: 0; }
.flex-item:nth-child(4) { order: 0; }
Item 1
Item 2
Item 3
Item 4